<template>
  <div class="content-container">
    <p-tooltip placement="topLeft" :title="value">
      <p-input
        v-if="isEdit"
        :value="value"
        :placeholder="placeholder"
        :max-length="max"
        @input="handleInput"
      />
      <span v-else class="ellipsis" :style="{ width: width }">
        {{ value | formatEmpty }}
      </span>
    </p-tooltip>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: '',
    },
    width: {
      type: String,
      default: '80px',
    },
    isEdit: {
      type: Boolean,
      default: true,
    },
    placeholder: {
      type: String,
      default: '请输入',
    },
    max: {
      type: Number,
      default: 2000,
    },
  },
  methods: {
    handleInput(e) {
      this.$emit('change', e.target.value);
    },
  },
};
</script>

<style lang="less" scoped>
.content-container {
  width: 100%;
  display: flex;
  align-items: center;
  .content {
    margin-right: auto;
  }
  .icon {
    margin-left: 8px;
  }
  .ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
  }
}
</style>
